<template>
	<div class="footballindex">
		<top></top>
		<div class="main">
			<!--<banner></banner>-->
			<page-title mt="20"><span class="c-gold">{{LangSet(['賽事大厅','Games hall'])}}</span></page-title>
			<!--页面提示头-->
			<div class="page-tips mt20" v-cloak>
				<p class="share-text copytext">
					給你分享一款DAPP遊戲，在支持TRON的錢包里面打開這個地址就可以啦：
					{{shareUrl}}
					<template v-if="tornlinkToken">?code={{tornlinkToken.code}}</template>
					<!--由于vue的变量响应式设计原因，下面需要这样判断，才能从vue的Object中取值-->
				</p>
				<el-button type="danger" size="small" class="JS-copy pointer">{{LangSet(['複製分享內容','Click to copy'])}}</el-button>
				<div>賽事狀態顯示可能會有延遲，以賽事詳情頁為準</div>

				<div class="flex-jc-c" >
					<el-input class="w110"
					          placeholder="隊伍名稱"
					          size="small"
					          v-model="keyWord"
					          clearable>
					</el-input>

					<el-button type="success" size="small" @click="getGame()" icon="el-icon-refresh" :loading="loading">查詢&刷新</el-button>
					<router-link to="/manage">
						<el-button type="warning" size="small">投票中心→</el-button>
					</router-link>
				</div>
			</div>
			<!--<div class="page-tips mt10"></div>-->
			<div class="games-tab">
				<div class="games-tab-wrap">
						<span
							:class="{'active':key==listTypeSelected}"
							v-for="(value, key, index) in listTypes"
							@click="actToggleListType(key)">{{value}}
						</span>
				</div>
			</div>
			<!--主要内容-->
			<div class="games mt10" v-loading="loading">
				<a
					v-for="(item,i) in gamePlayList" :key="item.id"
					:href="'#/contest/'+item.playId"
					class="game-box" target="_self"
				>
					<div class="game-picture">
						<!--<div class="status">{{contestStatusCnByCompute(item.status,item.endTimeStr)}}</div>-->
						<!--状态显示-->
						<template v-if="item.status==0">
							<div class="status" style="background:#f23" v-if="isNowInTheBetTimeRange(item.startTimeStr,item.endTimeStr)==true">投注進行中</div>
							<div class="status" style="background:#293" v-if="timestampNow < (Date.parse(item.startTimeStr) /1000)">投注未開始</div>
							<div class="status" style="background:#293" v-if="timestampNow > (Date.parse(item.endTimeStr) /1000)">投注結束</div>
						</template>
						<div class="status" style="background:#333" v-if="item.status == '1'">禁用</div>
						<div class="status" style="background:#23f" v-if="item.status == '2'">已開獎</div>
						<div class="status" style="background:#333" v-if="item.status == '3'">已作廢</div>
						<!--是否有图片-->
						<template v-if="item.contestMasterImg && item.contestBranchImg">
							<img class="imgc img1" :src="item.contestMasterImg" />
							<img class="imgc img2" :src="item.contestBranchImg" />
						</template>
						<template v-else>
							<span class="text lefttext">{{item.contestMaster}}</span>
							<span class="text righttext">{{item.contestBranch}}</span>
						</template>
					</div>
					<!--<div>
						状态：{{item.status}}
						是否在TZ时间内：{{isNowInTheBetTimeRange(item.startTimeStr,item.endTimeStr)}}
					</div>-->
					<div class="game-title">{{item.infoName}}：{{item.contestMaster +'VS'+ item.contestBranch}}({{item.symbol}})</div>
				</a>
			</div>

			<div class="mt40"></div>

			<!--main 结束 -->
			<footter color="color" showLink></footter>

			<!--免责声明-->
			<div class="disclaimer">{{disclaimer}}</div>

			<float-tip strEnd="gamesIndex" showClose>
				<div style="padding:10px 20px 0px;">
					<p class="f14" style="color:#ff1014">我們不對這些國家或地區提供服務:{{serviceArea}}</p>
					<p class="f14" style="color:#3300ef">{{disclaimer}}</p>
				</div>
			</float-tip>

		</div>
		<!--main结束-->

	</div>
</template>

<script type="text/javascript">

/*组件*/
import top from '@/components/top.vue'
import footter from "@/components/footer.vue"
import banner from '@/components/banner.vue'
import pageTip from '@/components/pageTip.vue'
import pageTitle from '@/components/pageTitle.vue'
import floatTip from '@/components/floatTip.vue'

/*加载资源*/
import { mixins } from '@/mixins/mixins' //公共混入
import { mixinsUtils } from '@/mixins/mixins.utils' //公共混入
import { contestMixinsGlobal} from '@/views/contestHall/contest.mixins.global'
import { disclaimer, serviceArea } from '@/libs/lang'
import { apiGameList } from "@/views/contestHall/contest.func";


//导出
export default {
	name:"contestHall",
	components: { top,footter,banner,pageTip,pageTitle,floatTip },
	mixins:[mixins,mixinsUtils,contestMixinsGlobal],
	data () {
		return {
			loading    : false,
			timeHandler: null,
			disclaimer : disclaimer,//免责声明
			serviceArea: serviceArea,//服务地区

			/*
			* 进行中：投注进行，投注结束（未开奖的）
			* 投票中：投票进行中的赛事
			* 已开奖：开奖后的
			* 其它：只有作废的可以显示
			* */
			listTypes: {
				'my'     : '我參與',
				'playing': '進行中',
				'voting' : '投票中',
				'over'   : '已開獎',
				'another': '其它',
			},
			listTypeSelected:'playing',
			keyWord:'',
			gamePlayList:[]
		};
	},
	computed: {
		//分享地址
		shareUrl () {
			let _url = window.location.href.replace(/\?code=.*/gi,'');
			//由于tornlinkToken不是vue初始的变量，不是响应式的，不能在计算属性中使用，会报错
			// _url = _url + "?code=" + this.tornlinkToken.code;
			return _url
		}

	},
	created () {
		this.pageInit();
		this.timeHandler = setInterval(()=> {
		    this.funResetTimestampNow()
		},2000)
	},
	mounted () {

	},
	methods:{
		//初始化
		pageInit(){
			if(!this.sender || this.sender==''){
				console.log('钱包没有初始化，等待重试...')
				setTimeout(() => {
					this.pageInit()
				},3000)
			}else{
				console.log('ok,钱包已经初始化，进行相关数据加载...')
				this.getGame();
			}

		},

		//加载游戏列表
		getGame(){
			if(this.loading == true){
				this.$notify({title:"提示",type:"warning",message:"请等待..."})
				return false
			}
			this.loading = true

			let postdata = {
				act      : 'getGamePlay',
				keyWord  : this.keyWord,//搜索关键字，接口已接收
				pageIndex: 1, //分页参数
				pageSize : 100, //分页参数
				playType: 1, //玩法类型
				listType : this.listTypeSelected,  //当前打开的玩法列表，按不同类型，列做出不同的动态隐藏和显示
				status   : '', //传空为全部出来
				//我参数的使用
				sender   : this.sender,
			}
			apiGameList(postdata, (res)=> {
				if(res && res.data){
					if (res.resultFlag == false) {
						this.$message('gamelist err');
						return;
					}
					this.gamePlayList = res.data;
				}else{
					console.log('游戏获取失败');
				}
				setTimeout(() => {
					this.loading = false
				},500)
			});
		},
		//切换列表的数据类型
		actToggleListType(type){
			//是否登录
			if(type=='my' && !this.isLogin){
				this.$notify({
					type:"error",
					title:"提示",
					message:"你沒有登錄錢包"
				})
				return false
			}
			//防止快速切换
			if(this.loading == true){
				this.$notify({title:"提示",type:"warning",message:"请等待..."})
				return false
			}
			//防止重复点击同一个标签
			if(type !== this.listTypeSelected){
				this.listTypeSelected = type
				this.getGame()
			}
		}

	},
	beforeDestroy(){
		clearInterval(this.timeHandler)
	}
};
</script>

<style lang="less" scoped>
/*公共变量*/
@import '~@/assets/global.less';

.footballindex{
	min-height: 100vh;background: #6db8cd url('/images/footballbg.jpg') repeat center top;
}
/*列表*/
.games {
	background-color: #fff;
	max-width: 960px;margin: 0px auto 0px;padding: 80px 0px;border-radius: 20px;
	display: flex;align-items: flex-start;justify-content: center;flex-wrap: wrap;
}
.games .tip{color:#333;background: #fff;padding:2px;border-radius: 10px;}

a.game-box {color: #353e4d;width: auto;margin: 0px 20px 40px;padding: 0px;border-radius: 10px;}
a.game-box:hover {}
a.game-box:hover .game-picture {}
a.game-box:hover .game-title {color: #333}

.game-picture {
	height: 233px;background: #353e4d url("/images/footballbg02.jpg") no-repeat center center;background-size: cover;
	font-size: 32px;font-weight: bold;width: 300px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
	transition: all 0.5s;border: 3px solid #fff;border-radius: 10px;overflow: hidden;
	display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;
	overflow: hidden;
}

.game-picture .status {
	color:#fff;width:auto;font-size:12px;padding:4px 5px;text-align: center;
	position: absolute;left:0;top:0;opacity: 0.6;
}

.game-picture .imgc{position: absolute; width: 60px;max-height: 60px;top: 85px;z-index: 1}
.game-picture .img1 {left: 20px;}
.game-picture .img2 {right: 20px;}

.game-picture .text{position: absolute;font-size: 25px;font-weight: bold;}
.game-picture .lefttext{left: 20px;}
.game-picture .righttext{right: 20px;}

.game-title {color: #353e4d;font-size: 24px;font-weight: bold;text-align: center;padding: 20px 0px;transition: all 0.5s;}



//页面tip
.page-title{font-weight: bold;font-size: 32px;color:#ee9900}
.page-tips{max-width:800px;background-color: rgba(255,255,255,0.8);text-align: center;padding:15px 10px;border-radius:10px;margin:0px auto;}
.page-tips p{font-size: 16px;font-weight: bold;padding:2px 0px;}
.page-tips >a{}

/*tab*/
/*矿池类型tab*/
.games-tab {
	max-width: 480px ;
	margin: 10px auto 0;
	.games-tab-wrap{
		width:100%;max-width: 100%;margin:0px auto;background:#fff;border-radius:40px;
		display:flex;align-items: center;justify-content:center;
	}
	span{
		font-size: 14px;font-weight: bold;padding:10px 0px;flex:1;text-align: center;cursor: pointer;border-radius:40px;
		transition: all 0.5s;
		&.active{color:#fff;background:@blue;box-shadow: 0px 0px 20px rgba(0,0,0,0.2)}
	}
}
/*免责声明*/
.disclaimer{padding:0px 0px 20px 0px}

/**********************适应************************/
@media screen and (max-width: @MINSCREEN) {
	.page-tips p{font-size: 14px;font-weight: bold;padding:2px 0px;}

	.games {background-color: transparent;padding: 0px 0px;}
	a.game-box {margin: 10px 20px 10px;}
	.game-picture {border: 3px solid rgba(255,255,255,1);border-radius: 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0);}
	.game-title {font-size: 14px;padding: 10px 0px;}
}
</style>
